<!-- 5、小程序页面的ui需要优化，这个需要ui设计师和其他同学的帮助和意见。 -->
<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
	
	<!-- 地址薄 -->
	<view class="location-view">
		
		<view class="location-content">
		  <radio-group @change="handleRadioChange">
		    <view class="radio-full-item" v-for="(item, index) in addressList" :key="item.id">
		      <view class="row1">
		        <view class="user_location">
		          <view class="left-title text12">{{ item.address }}</view>
		          <view class="radio-icon">
		            <radio :value="item.id" :checked="item.checked" />
		          </view>
		        </view>
		      </view>
		      <view class="row2">
		        <view class="info ">
		          <text class="username text11">{{ item.username }}</text>
		          <text class="phone text11">{{ item.phone }}</text>
		        </view>
		        <view class="operator ">
		          <text class="remove text11" @click.stop="removeLocation(item.id)">删除</text>
		          <text class="edit text11" @click.stop="showEditSheet(item)">修改</text>
		        </view>
		      </view>
		    </view>
		  </radio-group>
			
		  <view class="radio-footer-btn">
		    <view class="btn-view">
		      <wd-button size="large" type="error" block @click="showEditSheet(null)">新增</wd-button>
		    </view>
		  </view>
		</view>
		
	</view>
	
	
	  <!-- 编辑地址 -->
	  <wd-action-sheet
	      custom-class="editAddressView"
	      v-model="showEditSheetModel"
	      :title="currentEditId ? '修改地址' : '新增地址'"
	      @close="showEditSheetModel = false"
	  >
	    <view class="edit-form">
	      <view class="form-item">
	        <text class="form-label">地址</text>
	        <wd-input v-model="editForm.title" placeholder="请输入地址" />
	      </view>
	      <view class="form-item">
	        <text class="form-label">姓名</text>
	        <wd-input v-model="editForm.username" placeholder="请输入姓名" />
	      </view>
	      <view class="form-item">
	        <text class="form-label">电话</text>
	        <wd-input v-model="editForm.phone" placeholder="请输入电话" type="number" />
	      </view>
	    </view>
	
	    <view class="edit-actions">
	      <wd-button size="large" type="default" block @click="showEditSheetModel = false">
	        取消
	      </wd-button>
	      <wd-button size="large" type="error" block @click="saveAddress" style="margin-top: 10px">
	        确定
	      </wd-button>
	    </view>
	  </wd-action-sheet>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { locationListApi, searchLocationItemApi } from "@/api/user"
	
import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
	
	import {
		useRouter
	} from 'uni-mini-router'
	const router = useRouter();
	const fontSizeStore = useFontSizeStore();
	
import {
  ref,
  onMounted,
  nextTick
} from 'vue'

const showBottomModel = ref(false);

// 主地址面板显示控制
const showAddressModel = ref(false)
// 编辑地址面板显示控制
const showEditSheetModel = ref(false)
// 当前编辑的地址ID
const currentEditId = ref(null)
// 编辑表单数据
const editForm = ref({
  title: '',
  username: '',
  phone: ''
})

// 地址列表数据
const addressList = ref([])

// ✅ 新增：用于显示在支付弹窗中的地址信息
const selectedAddressText = ref('')
const selectedAddressTextClear = ref('点击选择')

// 处理单选框变化
const handleRadioChange = (e) => {
  const selectedId = e.detail.value
  addressList.value.forEach(item => {
    item.checked = item.id.toString() === selectedId
  })
  // ✅ 更新支付模块中显示的地址信息
  const selected = addressList.value.find(item => item.checked)
  if (selected) {
    selectedAddressText.value = `${selected.title} ${selected.username}`
  }
}

// 删除地址
const removeLocation = (id) => {
  const index = addressList.value.findIndex(item => item.id === id)
  if (index > -1) {
    addressList.value.splice(index, 1)
    if (addressList.value.length > 0 && !addressList.value.some(item => item.checked)) {
      addressList.value[0].checked = true
    }
  }
}

// 显示编辑面板
const showEditSheet = (item) => {
  showAddressModel.value = false
  if (item) {
    currentEditId.value = item.id
    editForm.value = { ...item }
  } else {
    currentEditId.value = null
    editForm.value = { title: '', username: '', phone: '', checked: false }
  }
  setTimeout(() => {
    showEditSheetModel.value = true
  }, 300)
}

// 保存地址
const saveAddress = () => {
  if (!editForm.value.title || !editForm.value.username || !editForm.value.phone) return
  if (currentEditId.value) {
    const index = addressList.value.findIndex(item => item.id === currentEditId.value)
    if (index > -1) {
      addressList.value[index] = { ...editForm.value, id: currentEditId.value }
    }
  } else {
    const newId = Math.max(...addressList.value.map(item => item.id), 0) + 1
    addressList.value.push({ ...editForm.value, id: newId })
  }
  showEditSheetModel.value = false
  setTimeout(() => {
    showAddressModel.value = true
  }, 300)
}

// 关闭地址面板
const closeAddressMethod = () => {
  showAddressModel.value = false
}

const showActionMethod = () => {
  showBottomModel.value = true
}

const showBottomMethod = () => {
  showBottomModel.value = false
}

const showAddressMethod = () => {
  showAddressModel.value = true;
}


onLoad((option)=>{
	locationListApi().then((res)=>{
		if(res.code==200){
			addressList.value=res.data;
		}
	})
})

</script>

<style lang="scss" scoped>


.location-view {
  //:deep(.wd-action-sheet__popup) {
  //  padding-left: 15px !important;
  //  padding-right: 15px !important;
  //  box-sizing: border-box;
  //}

  .location-content {
    width: 100%;
    position: relative;
    padding: 0px 10px;
    box-sizing: border-box;

    .radio-full-item {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 15px;
      // padding-bottom: 10px;
      //margin-bottom: 5px;

      .row1 {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: start;
        width: 100%;

        .user_location {
          display: flex;

          .left-title {
            flex: 1;
            font-weight: 500;
            font-size: 30rpx;
            color: #000;
          }

          .radio-icon {
            //flex: 0 0 80px;
            //display: flex;
            //justify-content: end;
          }
        }


        //.user_location, .user_info {
        //  text-align: left;
        //  justify-content: left;
        //  margin: 4px 0;
        //
        //
        //  .username {
        //    color: #000;
        //  }
        //
        //  .phone {
        //    color: #aaa;
        //    margin-left: 10px;
        //  }
        //}


      }

      .row2 {
        width: 100%;
        display: flex;


        .info {
          flex: 1;
          font-size: 25rpx;
          .username{
            color: #000;
          }
          .phone{
            color: #aaa;
            margin-left:10px
          }

        }

        .operator {
          flex: 0 0 100px;
          display: flex;
          justify-content: flex-end;
          //    width: 100%;
          //    text-align: left;
          //
              text {
                margin-right: 10px;
                color: #aaa;
              }

              .remove {
                border-right: 1px solid #ededed;
                padding-right: 10px;
              }

        }
      }


    }

    //.header {
    //  border-bottom: 1px solid #ededed;
    //
    //  .operator {
    //    width: 100%;
    //    text-align: left;
    //
    //    text {
    //      margin-right: 10px;
    //      color: #aaa;
    //    }
    //
    //    .remove {
    //      border-right: 1px solid #ededed;
    //      padding-right: 10px;
    //    }
    //  }
    //}


    .radio-footer-btn {
      justify-content: space-evenly;
      width: 100%;
      display: flex;
      position: fixed;
      left: 0;
      bottom: 30px;

      .btn-view {
        padding: 15px;
        width: 100%;

        button {
          width: 100%;
        }
      }

    }


  }
}


.location-view{
	margin-top: 40rpx;
}

.edit-form{
		padding: 15px!important;
}
.form-item{
	margin-bottom: 10px!important;
}

.user_location{
	margin-bottom: 20rpx;
}
</style>
 